<template>
  <a-drawer :title="modalTitle" width="100%" :visible="modalVisible" :body-style="{ paddingBottom: '80px', paddingRight: '20px' }" @close="handleCancel">

    <splitpanes class="default-theme" @resize="resize" @resized="resized">
      <pane min-size="25" size="40">
        <a-form-model ref="formComponentRef" :rules="rules" :model="infoForm" style="margin: 20px 20px;overflow: auto;max-height: 800px;">
          <div v-for="(formItem, index) in currentFormSetting.formItem">
            <a-form-model-item  v-show="formItem.show"  v-if="formItem.type == 'input'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
              <a-input v-model="infoForm[formItem.key]" :placeholder="formItem.placeholder" @blur="previewDocByDocName" :disabled="formItem.disabled" />
            </a-form-model-item>

            <a-form-model-item  v-show="formItem.show"  v-if="formItem.type == 'textarea'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
              <a-textarea v-model="infoForm[formItem.key]" allow-clear :auto-size="{ minRows: 5, maxRows: 7 }"  :placeholder="formItem.placeholder" :disabled="formItem.disabled"
                @blur="previewDocByDocName" />
            </a-form-model-item>

            <a-form-model-item  v-show="formItem.show"  v-if="formItem.type == 'date'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
              <a-date-picker v-model="infoForm[formItem.key]" :style="{ width: 'calc(50% - 12px)', float: 'left' }" :disabled="formItem.disabled" :placeholder="formItem.placeholder"
                :format="formItem.format" allowClear @change="previewDocByDocName" />
            </a-form-model-item>

            <a-form-model-item  v-show="formItem.show"  v-if="formItem.type == 'number'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
              <a-input-number  :style="{ width: 'calc(30% - 12px)', float: 'left' }" :min="0" v-model="infoForm[formItem.key]" :placeholder="formItem.placeholder" :disabled="formItem.disabled" @blur="previewDocByDocName" />
            </a-form-model-item>
          </div>
        </a-form-model>
      </pane>
      <pane min-size="25">
        <div class="pane_right">
          <div ref="file" :loading="previewLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
               style="height:800px;overflow-y:auto;">
          </div>
        </div>
      </pane>
    </splitpanes>

    <div class="button-div">
      <a-button @click="handleCancel" style="margin-right: 20px"> 取消 </a-button>
      <a-button type="primary" icon="download" @click="download" :loading="loading" style="margin-right: 20px">
        下载
      </a-button>
      <a-button type="primary" icon="save" @click="onSubmit" :loading="loading"> 保存 </a-button>
    </div>
  </a-drawer>

</template>

<script>
import { BaseCaseHandleUpdateMinxin } from '../minxin/BaseCaseHandleUpdateMinxin'
export default {
  mixins: [BaseCaseHandleUpdateMinxin],
  data() {
    return {}
  },
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.button-div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: center;
  z-index: 1;
}

.steps-style {
  width: 50%;
  margin: auto;
}

::v-deep .ant-form-explain {
  float: left;
}
</style>